<template>
    <div>
        <el-container>
            <el-container class="box">
                <el-header>
                    <div class="logo">
                        <img src="./车库.png" alt="" />
                        <span>车位</span>
                        <div class="contentBox">
                            <el-menu
                                :default-active="activeIndex"
                                mode="horizontal"
                                background-color="#409EFF"
                                text-color="white"
                                :router="true"
                            >
                                <el-menu-item index="/register"
                                    >注册</el-menu-item
                                >
                                <el-menu-item index="/login">登录</el-menu-item>
                                <el-menu-item @click="jump">租车</el-menu-item>

                                <el-menu-item @click="jumpPerson"
                                    >个人中心
                                </el-menu-item>
                            </el-menu>
                            <div class="line"></div>
                        </div>
                        <div class="headerImg">
                            <img
                                :class="{ imgs: false }"
                                src="./头像 男孩.png"
                                alt=""
                            />
                            <el-button v-popover:popover1>{{
                                username
                            }}</el-button>
                            <el-popover
                                ref="popover1"
                                placement="top-start"
                                :title="username"
                                width="200"
                                trigger="hover"
                                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
                            >
                                <span>租车号:{{ idNum }}</span>
                                <p>电话号码:{{ phone }}</p>
                            </el-popover>
                        </div>
                    </div>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
                <el-footer>
                    <div>
                        <p>Copyright © 2006-2020 ZUCHE租车</p>
                    </div>
                </el-footer>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions: tenantsMapActions } = createNamespacedHelpers("tenants"); //主仓库引入子仓库的名称,
export default {
    props: ["id"],
    data() {
        return {
            activeIndex: "1",
            activeIndex2: "1",
            username: "123",
            idNum: "",
            phone: "",
        };
    },
    methods: {
        ...tenantsMapActions(["getTenantsById"]),
        jump() {
            this.$router.push("/system/parkingList/" + this.idNum);
        },
        jumpPerson() {
            this.$router.push("/system/person/" + this.idNum);
        },
    },
    async mounted() {
        const data = await this.getTenantsById(this.id);
        if (data.status) {
            // console.log(data);
            this.username = data.data[0].name;
            this.idNum = data.data[0]._id;
            this.phone = data.data[0].phone;
        }
    },
};
</script>

<style>
.headerImg {
    display: flex;
    /* border-radius: 50%; */
    width: 6%;
}
.headerImg > img {
    width: 80%;
}
.imgs {
    display: none;
}
.contentBox {
    margin-left: 20%;
}
.logo {
    display: flex;
    height: 100%;
    justify-content: start;
    align-items: center;
    margin: 0px 15% 0px 15%;
}
.logo > img {
    height: 80%;
}
h3 {
    margin: 0;
    color: white;
    font-family: "Courier New", Courier, monospace;
}
.box {
    height: 100vh;
}
.el-header,
.el-footer {
    background-color: #409eff;
    color: #333;
    text-align: center;
}

.el-aside {
    background-color: #409eff;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    background-image: url("./01c0565f96ab4411013fdcc76ea04f.jpg@1280w_1l_2o_100sh.jpg");
    /* line-height: 160px; */
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>